﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东-欢迎登录</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        a{
            color: #666666;
            text-decoration: none;
        }
        img{
            vertical-align: center;
        }
        .clearfix:after{
            display:table;
            content:"";
            clear:both;
        }
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }
        body{
            font-size: 12px;
        }
        .top{
            width: 990px;
            margin: 10px auto;
            padding: 10px;
        }
        .top h2{
            font-size: 26px;
            font-family: 微软雅黑;
            font-weight: 400;
            margin: 10px;
            margin-top: 20px;
            padding-left: 6px;
        }
        .top .exam{
            margin-top: 50px;
            background: url("https://misc.360buyimg.com/user/passport/1.0.0/css/i/q-icon.png") no-repeat 0px 0px;
            padding-left: 24px;
        }
        .tip{
            background: #fff8f0;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
        .cntbg{
            background: #f65868 url("https://img13.360buyimg.com/da/jfs/t21742/117/190468209/161539/f69df9fc/5b02798cNead88af7.jpg") no-repeat top center;
        }
        .cnt{
            width: 990px;
            height: 475px;
            margin: 0px auto;
        }
        .cnt .yemian{
            float: right;
            background: white;
            width: 380px;
            margin-top: 10px;
            height: 400px;
        }
        .cnt .yemian .p1{
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: #fff8f0 url("http://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2016-1124/i/icon-tips.png") no-repeat 10px center;
        }
        .cnt .yemian .shaoma{
            float: left;
            margin-left: 30px;
            font-size: 20px;
            font-weight: 500;
        }
        .cnt .yemian .zhanghu{
            float: right;
            margin-right: 30px;
            font-size: 20px;
            font-weight: 500;
        }
        .yonghuming{
            margin-top: 40px;
            margin-left: 30px;
        }
        .yonghuming span{
            width: 38px;
            height: 38px;
            background:url(https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2016-1124/i/pwd-icons-new.png) no-repeat;
            border:1px solid #ccc;
        }
        .yonghuming input{
            height:40px;
            width:280px;
            border:1px solid #ccc;
            border-left:none;
            box-sizing:border-box;
            padding-left:5px;
            outline:none;
        }
        .mima{
            margin-top: 10px;
            margin-left: 30px;
        }
        .mima span{
            width: 38px;
            height: 38px;
            background:url(https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2016-1124/i/pwd-icons-new.png) no-repeat;
            border:1px solid #ccc;
        }
        .mima input{
            height:40px;
            width:280px;
            border:1px solid #ccc;
            border-left:none;
            box-sizing:border-box;
            padding-left:5px;
            outline:none;
        }
        .forgetmima a{
            float: right;
            margin-right: 10px;
            margin-top: 14px;
        }
        .forgetmima a:hover{
           color: #f65868;
            text-decoration: underline;
        }
        .anniu{
            width: 304px;
            height: 33px;
            background-color: red;
            font-size: 20px;
            line-height: 33px;
            color: white;
            text-align: center;
            margin: 50px auto;
        }
        .dishanfang{
            background-color: #eeeeee;
            height: 50px;
            margin-top: 100px;
        }
        .qq{
            background: url(https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2016-1124/i/QQ-weixin.png) no-repeat;
            margin: 20px 20px;

        }
        .qq a{
            margin-left: 20px;
        }
        .bot{
            text-align: center;
            margin-top: 20px;
        }
        .bot p{
            margin-top: 10px;
        }
        .bot a{
            margin: 0px 10px;
        }
        .bot a:hover{
            color: #f65868;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="jingdong">
        <!--登录头部开始-->
        <div class="top clearfix">
            <div class="logo">
              <img src="https://misc.360buyimg.com/lib/img/e/logo-201305-b.png" class="fl"/>
              <h2 class="fl">欢迎登录</h2>
            </div>
            <div class="exam fr">
                <a href="#">登录页面，调查问卷</a>
            </div>
        </div>
        <!--登录头部结束-->
        <!--登录提示开始-->
        <div class="tip">
            <p>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版《京东隐私政策》已上线，将更有利于保护您的个人隐私</p>
        </div>
        <!--登录提示结束-->
        <!--登录主体开始-->
        <div class="cntbg">
            <div class="cnt">
                <div class="yemian">
                    <div class="p1">京东不会以任何理由要求您转账汇款，谨防诈骗</div>
                    <div class="denglu">
                        <div class="shaoma">扫码登录</div>
                        <div class="zhanghu">账户登录</div>
                    </div>
                    <form>
                        <div class=" clearfix yonghuming">
                            <span  class="fl"></span>
                            <input type="text" placeholder="邮箱/用户名/已验证手机" size="100"/>
                        </div>
                        <div class="mima">
                            <span class="fl"></span>
                            <input type="password" placeholder="密码" />
                        </div>
                        <div class="forgetmima">
                            <a href="#>">忘记密码</a>
                        </div>
                        <div class="anniu">登录</div>
                    </form>
                    <div class="dishanfang">
                        <div class="qq fl"><a href="#">QQ</a> </div>
                        <div class="weixin fl"><a href="#">微信</a> </div>
                        <div class="zhuce fr"><a href="#">立即注册</a> </div>
                    </div>
                </div>
            </div>
        </div>
        <!--登录主体结束-->
        <!--登录尾部开始-->
        <div class="bot">
            <div>
                <a href="#">关于我们</a>
                <span>|</span>
                <a href="#">联系我们</a>
                <span>|</span>
                <a href="#">人才招聘</a>
                <span>|</span>
                <a href="#">商家入驻</a>
                <span>|</span>
                <a href="#">广告服务</a>
                <span>|</span>
                <a href="#">手机京东</a>
                <span>|</span>
                <a href="#">友情链接</a>
                <span>|</span>
                <a href="#">销售联盟</a>
                <span>|</span>
                <a href="#">京东社区</a>
                <span>|</span>
                <a href="#">京东公益</a>
                <span>|</span>
                <a href="#">English Site</a>
            </div>
            <p>Copyright © 2004-2018  京东JD.com 版权所有</p>
        </div>
        <!--登录尾部结束-->
    </div>
</body>
</html>